<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <ul></ul> <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" name="sub" value="提交">
    </form>
    <script>
        // 事件对象
        var div = document.querySelectorAll('div')
        div.onclick = function(event) {
            console.log(event);
        }
        // 1. event 就是一个事件对象 写到我们侦听函数的小括号里面 当形参来看
        // 2. 事件对象只有 有了 事件才会存在, 它是系统给我们自动创建的,不用传参
        // 3. 事件对象 是我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的
        //    相关信息,如鼠标坐标,如果是键盘事件里面就包含的键盘事件的信息 比如判断用户按下了哪个键
        // 4. 这个事件对象我们可以自己命名 比如event,evt,e
        // 5. 事件对象也有兼容性问题 ie678 通过window.event 兼容性写法: e = e || window.event 

        // 1. e.target 返回的是触发元素事件的对象(元素)  this 返回的是绑定事件的对象
        var div = document.querySelector('div');
        div.addEventListener('click',function(e) {
            console.log(e.target); // <div>123</div>
            console.log(this); // <div>123</div>
            console.log(e.type); //click 返回事件类型
        })
        // 区别
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            console.log(e.target); //<li>1</li> 指向我们点击的那个对象 谁触发了这个事件 我们点击了li e.target 指向的是li
            console.log(this); // <ul>...</ul>
            console.log(e.currentTarget); // <ul>...</ul> 约等于this
        })


        // 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交 
        var a = document.querySelector('a')
        a.addEventListener('click',function(e) {
            e.preventDefault() // dom 标准写法
        })
        // 传统的注册方式
        a.onclick = function() {
            // 低版本浏览器
            e.returnValue;
            return false
            // 我们可以利用return false 也能阻止默认行为 没有兼容问题 但是后面的代码都不执行
            // 而且只适用于传统的注册方式

        }


        // ❤❤❤ 阻止事件冒泡的两种方式 e.stopPropagation()  /  e.cancelBubble = true / window.event.cancelBubble = true
        
    </script>
</body>
</html>